<template>
    <div class="container">
        <el-carousel height="180px">
            <el-carousel-item v-for="item in images" :key="item">
                <img class="banner-img" :src="item" alt="">
            </el-carousel-item>
        </el-carousel>
        <!-- 官方应用 -->

                <div class="public-title">
                    <div class="text">官方应用</div>
                    <div class="arrow">
                        <router-link to="/application/public">更多 ></router-link>
                    </div>
                </div>
        <div class="public">
            <div class="public-img">
                <img :src="img_public" alt="">
            </div>
            <div class="public-content">
                <div class="public-item" >
                    <div class="public-item-content">
                        <div class="public-item-content-item" :class="`item_` + (index % 2)"
                            v-for="(app, index) in info.publicInfo.slice(0,4)" @click="goApp(app.id)" :key="index">
                            <div class="public-item-content-item-icon">
                                <img :src="app.applyLogo" alt="">
                            </div>
                            <div class="public-item-content-item-info">
                                <div class="public-item-content-item-info-title">{{ app.applyName }}</div>
                                <div class="public-item-content-item-info-desc">{{ app.applyDescription }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            <!-- 基础应用 -->
                <div class="public-title">
                    <div class="text">基础应用</div>
                        <div class="arrow">
                            <router-link to="/application/base">更多 ></router-link>
                        </div>
                </div>
            <div class="base">
                <div class="base-img">
                    <img :src="app_base" alt="">
                </div>
                <div class="base-content">
                    <div class="base-item" >
                        <div class="base-item-content">
                            <div class="base-item-content-item" :class="`item_` + (index % 2)" v-for="(app, index) in info.baseInfo"
                            @click="goApp(app.id)"
                                :key="index">
                                <div class="base-item-content-item-icon">
                                    <img :src="app.applyLogo" alt="">
                                </div>
                                <div class="base-item-content-item-info">
                                    <div class="base-item-content-item-info-title">{{ app.applyName }}</div>
                                    <div class="base-item-content-item-info-desc">{{ app.applyDescription }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 基础应用 -->
            <div class="public-title">
                <div class="text">第三方应用</div>
                        <div class="arrow">
                            <router-link to="/application/three">更多 ></router-link>
                        </div>
            </div>
            <div class="base">
                <div class="base-img">
                    <img :src="app_three" alt="">
                </div>
                <div class="base-content">
                    <div class="base-item" >
                        <div class="base-item-content">
                            <div class="base-item-content-item" :class="`item_` + (index % 2)" v-for="(app, index) in info.threeInfo"
                            @click="goApp(app.id)"
                                :key="index">
                                <div class="base-item-content-item-icon">
                                    <img :src="app.applyLogo" alt="">
                                </div>
                                <div class="base-item-content-item-info">
                                    <div class="base-item-content-item-info-title">{{ app.name }}</div>
                                    <div class="base-item-content-item-info-desc">{{ app.applyDescription }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</template>

<script setup name="buy" lang="ts">
import b1 from '@/assets/images/b1.png'
import b2 from '@/assets/images/b2.png'
import icon_app from '@/assets/images/icon_app.svg'
import img_public from '@/assets/images/img_public.svg'
import app_base from '@/assets/images/app_base.svg'
import app_three from '@/assets/images/app_three.svg'
import apply from '@/api/system/apply';
import { onMounted } from 'vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const images = [b1, b2]

const pagePublic = ref({
    pageNum: 1,
    pageSize: 10,
    applyType: 1,
    display:0
})
const pageBase = ref({
    pageNum: 1,
    pageSize: 10,
    applyType: 2,
    display: 0
})
const pageThree = ref({
    pageNum: 1,
    pageSize: 10,
    applyType: 3,
    display: 0
})
const getList = async (params,key) => {
    const res = await apply.list(params)
    console.log('res :>> ', res);
    info[key] = res.rows
    console.log('info :>> ', info);
}
const info = reactive({
    publicInfo: [],
    baseInfo: [],
    threeInfo: []
})
const goApp = (id: string) => {
    window.open('/application/detail?id=' + id, '_blank')
}
onMounted(() => {
    getList(pagePublic.value,'publicInfo')
    getList(pageBase.value,'baseInfo')
    getList(pageThree.value,'threeInfo')
})
</script>

<style lang="scss" scoped>
.container {
    width: 1200px;
    margin: 0 auto;
    padding: 30px;
}

.banner-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.public-title {
    font-size: 16px;
    color: #303133;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .arrow {
        color: #409eff;
        cursor: pointer;
        font-size: 16px;
    }
}

.public {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .public-img {
        width: 450px;
        height: 250px;

        img {
            width: 450px;
            height: 250px;
        }
    }

    .public-content {


        .public-item {
            display: grid;

            .public-item-title {
                font-size: 16px;
                color: #303133;
                margin-bottom: 10px;
            }

            .public-item-content {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                margin-left: 10px;
                cursor: pointer;

                .item_0 {
                    margin-right: 40px;
                }

                .public-item-content-item {

                    width: 320px;
                    margin-bottom: 20px;
                    height: 100px;
                    border: 1px solid #ebeef5;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                    padding: 4px;

                    .public-item-content-item-icon {
                        width: 80px;
                        height: 80px;

                        img {
                            width: 80px;
                            height: 80px;
                            border-radius: 16px;
                            overflow: hidden;
                        }
                    }

                    .public-item-content-item-info {
                        margin-left: 10px;

                        .public-item-content-item-info-title {
                            font-size: 16px;
                            color: #303133;
                        }

                        .public-item-content-item-info-desc {
                            font-size: 14px;
                            color: #606266;
                            // 2行超出显示省略号
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                    }
                }
            }
        }
    }
}

.base {
    display: flex;
    justify-content: space-between;

    .base-img {
        width: 300px;
        height: 300px;

        img {
            width: 300px;
            height: 300px;
        }
    }

    .base-content {
        .base-item {
            .base-item-title {
                font-size: 16px;
                color: #303133;
                margin-bottom: 10px;
            }

            .base-item-content {
                display: grid;
                grid-template-columns: repeat(3, 1fr);

                margin-left: 10px;
                
                .item_0 {
                    margin-right: 40px;
                }

                .base-item-content-item {
                    width: 248px;
                    margin-bottom: 20px;
                    height: 80px;
                    border: 1px solid #ebeef5;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                    padding: 4px;
                    cursor: pointer;

                    .base-item-content-item-icon {
                        width: 60px;
                        height: 60px;
                        border-radius: 8px;
                        // overflow: hidden;

                        img {
                            width: 60px;
                            height: 60px;
                        border-radius: 16px;
                        overflow: hidden;
                        }
                    }

                    .base-item-content-item-info {
                        margin-left: 10px;

                        .base-item-content-item-info-title {
                            font-size: 16px;
                            color: #303133;
                        }

                        .base-item-content-item-info-desc {
                            font-size: 14px;
                            color: #606266;
                            // 2行超出显示省略号
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                    }
                }
            }
        }
    }
}
</style>